<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <el-card class="top">

      <el-form
        ref="carFormRef"
        :model="carForm"
      >
        <el-row type="flex">
          <!-- 车辆类型 -->
          <el-col>
            <el-form-item

              label="车辆类型"
              label-width="100px"
            >
              <el-select
                v-model="carForm.truckTypeId"
                style="width:243px"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in cartype"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>

              </el-select></el-form-item>
          </el-col>
          <!-- 车牌号码 -->
          <el-col>
            <el-form-item

              label="车牌号码"
              label-width="100px"
            >
              <el-input
                v-model="carForm.licensePlate"
                style="width:243px"
                placeholder="请输入车牌号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 搜索按钮 -->
          <el-col>
            <el-form-item>
              <el-button
                type="danger"
                @click="carFind"
              >搜索</el-button>
              <el-button
                size="medium"
                style="width:90px"
                @click="resetForm"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-card>
    <!-- 筛选区域 -->
    <el-card
      class="midde"

      :body-style="{padding:'0px',
                    height:'100%'}"
    >

      <el-radio-group
        v-model="form"
        text-color="#e15536"
        fill="#ffeeeb"
      >
        <el-row type="flex">
          <el-radio-button
            style="width:100%;height:100%"
            label="left"
            @click.native="carTypeFind('')"
          >全部<span> {{ +carOk.okcar + +carOk.nocar }}</span></el-radio-button>
          <el-radio-button
            label="right"
            style="width:100%;height:100%"
            @click.native="carTypeFind(1)"
          >可用<span>
            {{ carOk.okcar }}
          </span></el-radio-button>
          <el-radio-button
            label="top"
            style="width:100%;height:100%"
            @click.native="carTypeFind(0)"
          >停用
            <span>
              {{ carOk.nocar }}
            </span>
          </el-radio-button>
        </el-row>
      </el-radio-group>

    </el-card>
    <!-- 车辆管理表单 -->
    <el-card class="but">
      <el-button
        type="warning"
        @click="dialogFormVisible=true"
      >新增车辆</el-button>
      <!-- 车辆表单 -->
      <template>
        <el-table
          v-loading="loading"
          :data="carList"
          stripe
          style="width: 100%"
          class="formcar"
        >
          <el-table-column

            label="序号"
            width="60"
          >
            <template slot-scope="scope">
              <span>{{
                scope.$index +
                  (carForm.page - 1) *
                  carForm.pageSize +
                  1
              }} </span>
            </template></el-table-column>
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="truckTypeName"
            label="车辆类型"
            width="165"
          >
          </el-table-column>
          <el-table-column
            prop="driverNum"
            label="司机数量"
          >
          </el-table-column>
          <el-table-column
            prop="workStatus"
            label="车辆状态"
          >
            <!-- 正常/禁用 -->
            <template slot-scope="scope">
              <div
                v-if="scope.row.status !== null"
                class="tableColumn-status"
                :class="{ 'stop-use': String(scope.row.workStatus) === '0' }"
              >
                {{ String(scope.row.workStatus) === '1' ? '可用' : '停用' }}
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceGpsId"
            label="GPS设备ID"
          ></el-table-column>
          <el-table-column
            prop="allowableLoad"
            label="实载重量(T)"
          >
          </el-table-column>
          <el-table-column
            width="135px"
            prop="allowableVolume"
            label="实载体积(方)"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="220px"
          >
            <template #default="{row}">
              <el-link
                :underline="false"
                type="primary"
                @click="btnRouter(row.id)"
              >查看详情</el-link>

              <el-divider direction="vertical"></el-divider>
              <el-link
                v-if="(String(row.workStatus) === '0')"
                :underline="false"
                type="primary"
                style="margin:0 5px"
                @click="startOfStop(row.status,row.id)"
              >启用</el-link>
              <el-link
                v-else
                :underline="false"
                type="danger"
                style="margin:0 5px"
                @click="startOfStop(row.status,row.id)"
              >停用</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link
                :underline="false"
                type="primary"
                @click="editDriver(row)"
              >配置司机</el-link>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <!-- 分页器 -->

      <div class="block">

        <el-pagination
          :current-page="carForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="carForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="cartotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

    </el-card>

    <!-- 编辑组件 -->
    <vehicle-add-vue
      :dialog-form-visible.sync="dialogFormVisible"
    >
    </vehicle-add-vue>
    <!-- 配置司机弹窗组件 -->
    <arrange-driver-vue
      ref="arrangeDialog"
      :title-info="titleInfo"
      :car-modal-info="carModalInfo"
      :drivers-list="driversList"
      :form-base-ad="formBaseAd"
    ></arrange-driver-vue>
  </div>
</template>
<script>
import { getCarTypeStatics, truckList, truckStatusNoUse, truckStatusUse } from '@/api/transit'
import { truckTypeCommonList } from '@/api/common'

import vehicleAddVue from './components/vehicle-add.vue'

import arrangeDriverVue from './components/arrange-driver.vue'

export default {
  name: 'Vehicle',
  components: { vehicleAddVue, arrangeDriverVue },
  data() {
    return {
      // 配置司机所需要的数据
      titleInfo: {
        text: '配置司机'
      },
      carModalInfo: {

      },
      driversList: [],
      formBaseAd: {},
      // 假表单
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      loading: false,
      // 车辆分页数据
      carForm: {
        page: 1,
        pageSize: 10,
        // 车牌号
        licensePlate: '',
        //  车辆类型id
        truckTypeId: null,
        // 状态
        workStatus: ''

      },
      // 车辆列表
      carList: [],
      cartotal: null,
      cartype: [],
      // 可yong车辆 不可car
      carOk: {
        okcar: '',
        nocar: ''
      },
      dialogFormVisible: false
    }
  },
  computed: {

  },
  async created() {
    await this.cardListload(this.carForm)
    // 请求车辆类型
    this.cartype = (await truckTypeCommonList()).data
    this.carOkNo()
  },
  methods: {
    async cardListload(data) {
      this.loading = true
      try {
        const res = await truckList(data)
        this.loading = false
        if (res.code === 200) {
          this.carList = res.data.items
          this.cartotal = +res.data.counts
        }
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    },
    // 重置表单
    async resetForm() {
      await this.$refs.carFormRef.resetFields()
      this.carForm.page = 1
      this.carForm.pageSize = 10
      // 车牌号
      this.carForm.licensePlate = ''
      //  车辆类型id
      this.carForm.truckTypeId = null
      // 状态
      this.carForm.workStatus = ''
      await this.cardListload(this.carForm)
    },
    // 请求全部车辆可用数据
    async carOkNo() {
      const res = await getCarTypeStatics()
      this.carOk.okcar = res.data[0]
      this.carOk.nocar = res.data[1]
    },
    async carFind() {
      this.carForm.page = 1
      await this.cardListload(this.carForm)
    },
    async handleSizeChange(val) {
      try {
        this.carForm.pageSize = val
        this.carForm.page = 1
        await this.cardListload(this.carForm)
      } catch (error) {
        console.log(error)
      }
    },
    async handleCurrentChange(val) {
      this.carForm.page = val
      await this.cardListload(this.carForm)
    },
    // 全部 可用
    async carTypeFind(val) {
      this.carForm.workStatus = val
      await this.cardListload(this.carForm)
    },
    // 路由跳转
    btnRouter(id) {
      this.$router.push({ name: 'vehicle-detail', query: { id: id }})
    },
    // 配置车辆信息
    editDriver(row) {
      // this.$confirm('此操作将永久删除该文件, 是否继续?', '车辆配置', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.$message({
      //     type: 'success',
      //     message: '删除成功!'
      //   })
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消'
      //   })
      // })
      this.carModalInfo = row
      const el = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: el('div', null, [
          el('p', null, '配置司机需满足以下条件：'),
          el('p', null, [el('span', null, '1 车辆信息已完善'), el('span', { style: 'disolay:line-block;margin-left: 70px;' }, '2 车辆无未完成运输任务')])
        ]),
        showCancelButton: true
      }).then(() => {
        // 调用弹窗方法
        this.$refs.arrangeDialog.dialogFormV()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 启用与停用
    startOfStop(s, id) {
      const el = this.$createElement
      console.log(s)
      if (s === 0) {
        this.$msgbox({
          title: '车辆启用',
          message: el('div', null, [
            el('p', null, '确定要启用吗？车辆启用需满足以下条件：'),
            el('p', null, [el('span', null, '1 车辆信息已完善'), el('span', { style: 'disolay:line-block;margin-left: 70px;' }, '2 绑定司机>=2,且有排班')])
          ]),
          showCancelButton: true
        }).then(() => {
          return truckStatusUse(id)
        }).then(res => {
          if (res.msg === 'ok') {
            this.$message.success('启用成功')
            this.cardListload(this.carForm)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      } else {
        this.$msgbox({
          title: '车辆停用',
          message: el('div', null, [
            el('p', null, '确定要停用吗？车辆停用需满足以下条件：'),
            el('p', null, [el('span', null, '1 车辆当前无运输任务'), el('span', { style: 'disolay:line-block;margin-left: 70px;' }, '2 车辆无关联运输线路')]),
            el('p', { style: 'color: rgb(255, 179, 2)' }, '注：停用后司机将自动解除绑定')
          ]),
          showCancelButton: true
        }).then(() => {
          return truckStatusNoUse(id)
        }).then(res => {
          if (res.msg === 'ok') {
            this.$message.success('停用成功')
            this.cardListload(this.carForm)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  padding: 20px;
  /deep/ .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  /deep/ .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
.el-button--danger{
  background-color:#e15536 ;
  width: 90px;

}
/deep/.el-radio-button__inner{
  height: 48px;
  border: 0;
  line-height: 24px;
  width: 120px;
}
.formcar{
  margin-top:20px ;
}
.block{
  text-align: center;
  margin-top:20px ;
  height: 60px;
}

</style>

<style>
  .startconfirm{
    width: 481px;

    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 20px;
    }
    .top{
      width: 100%;
      height: 80px;
    }
    .midde{
      width: 100%;
      height: 48px;
      margin-bottom:20px ;
      margin-top:20px ;

    }
    .but{
      width: 100%;

    }
</style>
